import scrollReveal from 'scrollreveal'
import { reactive } from 'vue'

export default function (app) {
  app.directive('ScrollReveal', {
    mounted(el, bindings) {
      const data = reactive({
        // 3.在reactive()中声明scrollReveal组件
        ScrollReveal: scrollReveal(),
      })
      const staggeringOption = {
        delay: 300, // 延迟300出现
        distance: '50px', // 从下到上50px移动
        duration: 500, // 动画执行500ms
        easing: 'ease-in-out',
        origin: 'bottom', // 从下到上50px移动  top 则是从上到下
        viewOffset: {
          top: 0,
          bottom: 0
        },
        opacity: 0.001,
        mobile: true,
      }

      data.ScrollReveal.reveal(bindings.value, { ...staggeringOption, interval: 350 })
    },
  })
}




